.carousel-inner {
    & > {
        .item {
            @extend .clearfix;
    
            img {
                width: 100%;
            }
        }
    }
}

.carousel-caption {
    h3 {
        margin: 0;
        font-size: $gx-carousel-widget-heading-font-size;
        font-weight: $gx-carousel-widget-heading-font-weight !important;
        text-transform: none !important;
        color: $gx-carousel-widget-heading-color;
        
        @if ($gx-carousel-widget-heading-text-shadow) {
            text-shadow: $gx-carousel-widget-text-widget;
        } @else {
            text-shadow: none;
        }
        
        &:after {
            display: none;
        }
    }
    
    p {
        margin: 0;
        font-size: $gx-carousel-widget-tagline-font-size;
        font-weight: $gx-carousel-widget-tagline-font-weight;
        color: $gx-carousel-widget-tagline-color;
        
        @if ($gx-carousel-widget-tagline-text-shadow) {
            text-shadow: $gx-carousel-widget-text-widget;
        } @else {
            text-shadow: none;
        }
    }
}

.carousel-control {
    text-shadow: none;
    
    &.left,
    &.right {
        top: 50%;
        bottom: auto;
        width: $gx-carousel-widget-arrow-size;
        height: $gx-carousel-widget-arrow-size;
        transform: translateY(-50%);
        font-size: $gx-carousel-widget-arrow-size / 2;
        background: transparent;
        color: $gx-carousel-widget-arrow-color;
        opacity: 1;
        
        &:hover {
            color: $gx-carousel-widget-arrow-hover-color;
        }
    }
    
    .icon-prev,
    .icon-next,
    .fa-angle-left,
    .fa-angle-right {
        display: inline-block;
    }
    
    .icon-prev,
    .icon-next {
        width: 20px;
        height: 20px;
        font-family: "gm", serif;
        line-height: 1;
    }
    
    .icon-prev {
        &:before {
            content: "\e820";
        }
    }
    
    .icon-next {
        margin-right: 0;
        &:before {
            content: "\e800";
        }
    }
    
    &.disabled {
        color: $gx-carousel-widget-arrow-color !important;
        opacity: 0.5;
        cursor: default;
    }
}

.carousel-indicators {
    margin-bottom: 0;
    
    li {
        width: $gx-carousel-widget-indicator-size;
        height: $gx-carousel-widget-indicator-size;
        margin: 0 5px;
        background: $gx-carousel-widget-indicator-color;
        border-radius: $gx-carousel-widget-indicator-size;
        border: none;
        opacity: 0.7;
        
        &.active {
            width: $gx-carousel-widget-indicator-size;
            height: $gx-carousel-widget-indicator-size;
            margin: 0 5px;
            background-color: $gx-carousel-widget-indicator-active-color;
            border: none;
            opacity: 1;
        }
    }
}

@media screen and (min-width: $screen-sm-min) {
    .carousel-control {
        .fa-angle-left,
        .fa-angle-right,
        .icon-prev,
        .icon-next {
            width: $gx-carousel-widget-arrow-size;
            height: $gx-carousel-widget-arrow-size;
            font-size: $gx-carousel-widget-arrow-size;
        }
        
        &.left {
            left: 30px;
        }
    }
}

// Carousel Fade Effect
.carousel-fade .carousel-inner .item {
    opacity: 0;
    transition-property: opacity;
}
.carousel-fade .carousel-inner .active {
    opacity: 1;
}
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
    left: 0;
    opacity: 0;
    z-index: 1;
}
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
    opacity: 1;
}
.carousel-fade .carousel-control {
    z-index: 2;
}

@media all and (transform-3d), (-webkit-transform-3d) {
    .carousel-fade .carousel-inner > .item.next,
    .carousel-fade .carousel-inner > .item.active.right {
        opacity: 0;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.prev,
    .carousel-fade .carousel-inner > .item.active.left {
        opacity: 0;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.next.left,
    .carousel-fade .carousel-inner > .item.prev.right,
    .carousel-fade .carousel-inner > .item.active {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}